import React, { useEffect, useState } from "react";
import { NavBar, Tabs } from "antd-mobile";
import { Tag } from "react-vant";
import { useNavigate } from "react-router-dom";
import { DownOutline } from "antd-mobile-icons";
import http from "../../utils/http";
import { Search, CalendarO, Arrow } from "@react-vant/icons";
import { RightOutline } from "antd-mobile-icons";
// 引入公共组建
import Wsyy from "../../components/Wsyy/index";
import styles from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [doctorList, setDoctorList] = useState([]);
  const [list, setList] = useState([]);
  const [city] = useState("北京");
  const cityinfor = localStorage.getItem("yuyue-city");
  useEffect(() => {
    http.get("/nosocomium/list").then((res) => {
      const { code, data } = res.data;
      if (code === 20000) {
        setList(data);
      }
    });
    http.get("/doctor/list").then((result) => {
      const { code, data } = result.data;
      if (code === 20000) {
        setDoctorList(data);
      }
    });
  }, []);
  const bei = () => {
    navigate("/yuyue-city");
  };
  const backs = () => {
    navigate("/");
  };
  const tomyhuahao = () => {
    navigate("/myyuyueguahao");
  };
  return (
    <div>
      {/* 头部 */}
      <div
        style={{
          background: "#fff",
          color: "#000",
          position: "sticky",
          top: 0,
          zIndex: 9999,
        }}
      >
        <NavBar onBack={backs}>网上预约挂号_在线咨询</NavBar>
      </div>
      <div className={styles.yuyuebox}>
        <div className={styles.yuyuesearch}>
          {/* 搜索 */}
          <div className={styles.yuyuesearchtop}>
            <div>
              <h3 onClick={bei}>
                {cityinfor ? cityinfor : city} <DownOutline />
              </h3>
            </div>
            <div className={styles.yuyuesearchinput}>
              <span>
                <Search />
              </span>{" "}
              <input type="text" placeholder="医院名称、科室、疾病、医生名称" />
            </div>
          </div>
        </div>
        {/* 公共组建 */}
        <div className={styles.zujian}>
          <Wsyy />
        </div>
        {/* 我的挂号 */}

        <div className={styles.myguahao}>
          <div
            style={{ fontSize: "25px", marginTop: "5px", marginLeft: "1rem" }}
          >
            <CalendarO />
          </div>
          <h2 style={{ marginLeft: "5px" }}>我的挂号</h2>
          <p
            onClick={tomyhuahao}
            style={{
              marginLeft: "40%",
              fontSize: "15px",
              color: "rgb(153, 153, 153)",
            }}
          >
            查看记录
            <Arrow />{" "}
          </p>
        </div>

        {/*热门医院医院模块 */}
        <div className={styles.ForyouBox}>
          {/* 医院 */}
          <div className={styles.Foryoutitle}>
            <div style={{ display: "flex" }}>
              <h2 style={{ marginLeft: "20px" }}>热门医院</h2>
              <p
                style={{
                  fontSize: "15px",
                  color: "rgb(153, 153, 153)",
                  marginLeft: "180px",
                }}
              >
                更多
                <Arrow />
              </p>
            </div>
          </div>

          {/* 医院列表 */}
          <div className="Foryou-list">
            {list.length > 0 &&
              list.map((item: any, index) => {
                return (
                  <div
                    style={{
                      width: "100%",
                      display: "flex",
                      borderBottom: "solid 1px #f5f5f5",
                      padding: "10px",
                      marginTop: "8px",
                    }}
                    key={index}
                  >
                    <img
                      src={item.socoimage}
                      style={{
                        width: "60px",
                        height: "60px",
                        marginLeft: "10px",
                        borderRadius: "12px",
                        border: "solid 1px #ccc",
                      }}
                      alt=""
                    />
                    <div style={{ marginLeft: "10px" }}>
                      <h2 style={{ width: "100%" }}>{item.socolv}</h2>
                      <Tag plain color="#60bf97">
                        {item.socostate}
                      </Tag>
                      <p
                        style={{
                          marginTop: "10px",
                          fontSize: "15px",
                          color: "rgb(153, 153, 153)",
                        }}
                      >
                        科室：{item.socoadmin}
                      </p>
                      <p
                        style={{
                          marginTop: "10px",
                          fontSize: "15px",
                          color: "rgb(153, 153, 153)",
                        }}
                      >
                        地址：{item.sococity}
                      </p>
                    </div>
                    <div
                      style={{ fontSize: "15px", color: "rgb(153, 153, 153)" }}
                    >
                      <RightOutline />
                      99km
                    </div>
                  </div>
                );
              })}
          </div>
        </div>

        {/* 热门医生 */}
        <div>
          <div>
            <div style={{ display: "flex", marginTop: "15px" }}>
              <h2 style={{ marginLeft: "20px", fontSize: "25px" }}>热门医生</h2>
              <p
                style={{
                  marginLeft: "auto",
                  fontSize: "18px",
                  color: "rgb(153, 153, 153)",
                }}
              >
                更多
                <Arrow />{" "}
              </p>
            </div>
          </div>
          <Tabs activeLineMode="fixed" style={{ marginTop: "1vh" }}>
            <Tabs.Tab title="全部" key="1">
              {doctorList.length > 0 &&
                doctorList.map((item: any, index: number) => {
                  return (
                    <div
                      className="docotr-title"
                      style={{ marginTop: "10px" }}
                      key={index}
                    >
                      <div style={{ display: "flex" }}>
                        <div>
                          <img
                            src={item.doctorimage}
                            style={{
                              width: "60px",
                              height: "60px",
                              marginLeft: "10px",
                              borderRadius: "12px",
                              border: "solid 1px #ccc",
                            }}
                            alt=""
                          />
                        </div>
                        <div style={{ marginLeft: "10px" }}>
                          <h2 style={{ width: "100%" }}>
                            {item.doctorname} | {item.doctorstate}
                          </h2>
                          <p
                            style={{
                              marginTop: "10px",
                              fontSize: "15px",
                              color: "rgb(153, 153, 153)",
                            }}
                          >
                            {item.socoadmin} | {item.sococity}
                          </p>
                          <p
                            style={{
                              marginTop: "10px",
                              fontSize: "15px",
                              color: "rgb(153, 153, 153)",
                              width: "220px",
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              whiteSpace: "nowrap",
                            }}
                          >
                            擅长：{item.socodescword}
                          </p>
                        </div>
                        <div>
                          <p
                            style={{
                              width: "50px",
                              height: "25px",
                              textAlign: "center",
                              lineHeight: "25px",
                              borderRadius: "12px",
                              background: "#60bf97",
                              color: "#fff",
                              fontSize: "12px",
                              fontWeight: "bold",
                            }}
                          >
                            去挂号
                          </p>
                        </div>
                      </div>
                    </div>
                  );
                })}
            </Tabs.Tab>
            <Tabs.Tab title="心血管内科" key="2">
              2
            </Tabs.Tab>
            <Tabs.Tab title="内分泌科" key="3">
              3
            </Tabs.Tab>
            <Tabs.Tab title="皮肤性病科" key="4">
              4
            </Tabs.Tab>
            <Tabs.Tab title="肝胆外科" key="5">
              5
            </Tabs.Tab>
            <Tabs.Tab title="妇科" key="6">
              5
            </Tabs.Tab>
            <Tabs.Tab title="男科" key="7">
              5
            </Tabs.Tab>
          </Tabs>
        </div>
      </div>
    </div>
  );
};

export default Index;
